<template>
	<view>
		<view class="p-2">
			<view class="d-flex a-center py-2 border-bottom border-light-secondary">
				<text class="text-muted">用户评价({{total}})</text>
				<text class="main-text-color ml-auto mr-1">{{(good_rate * 100) + '%'}}</text>
				<text class="text-muted">满意</text>
			</view>
			<view class="d-flex flex-wrap pt-2 mx-1">
				<view class="px-3 py border rounded mb-2 mx-2 cate-item d-flex" :class="cateIndex === index ? 'active' : ''" v-for="(item,index) in cateList" :key="index" @tap="cateChange(index)">
					{{item.name}}
				</view>
			</view>
		</view>
		<divider />
		
		<view class="p-2 d-flex border-bottom border-light-secondary" v-for="(item,index) in filteredComments" :key="index">
			<image :src="item.user.avatar" mode="widthFix" style="width: 90rpx;height: 90rpx;" class="rounded"></image>
			<view class="pl-2 flex-1">
					<view class="d-flex j-sb">
						<text class="font-md text-primary font-weight">{{item.user.nickname}}</text>
						<text class="iconfont icon-xihuanlike main-text-color">
							<text class="pl-1 font">{{item.rating | rating}}</text>
						</text>
					</view>
					<view class="line-h-md font-md">
						{{item.review.data}}
					</view>
					<view class="row" v-if="item.review.image.length > 0">
						<view class="span24-8 px pb" v-for="(img,index2) in item.review.image" :key="index2">
							<image :src="img" mode="widthFix" style="height: 100rpx;"></image>
						</view>
					</view>
					<view class="d-flex a-center j-sb">
						<text class="text-light-muted">{{item.review_time |formatTime}}</text>
						<view class="d-flex font-md">
							<view class="d-flex">
								{{item.goods_num}} <text class="iconfont icon-dianzan2 font-md ml-1 text-muted"></text>
							</view>
							<view class="d-flex ml-2">
								<text class="iconfont icon-pinglun1 font-md ml-1 text-muted"></text>
							</view>
						</view>
					</view>
					<!-- 客服回复 -->
					<view class="bg-light-secondary rounded p-2 d-flex flex-wrap a-center mt-1" v-for="(item2,index2) in item.extra" :key="index2">
						<template v-if="!item2.isuser">
							<text class="main-text-color">官方回复：</text>
							{{item2.data}}
							<view class="iconfont icon-dianzan text-light-muted line-h-md font ml-2">
								<text class="text-muted pl-1">赞客服 {{item2.good_num}}</text>
							</view>
						</template>
					</view>
			</view>
		</view>
		<divider />
		<!-- 上拉加载 -->
		<view 
		class="d-flex a-center j-center text-light-muted font-md py-3">
			{{loadtext}}
		</view>
	</view>
</template>

<script>
	import $T from '@/common/lib/time.js';
	export default {
		data() {
			return {
				id:0,
				cateIndex:0,
				cateList:[
					{ name:"全部",value:0},
					{ name:"好评",value:1},
					{ name:"中评",value:2},
					{ name:"差评",value:3},
				],
				total:0,
				good_rate:0,
				list:[],
				flist:[],
				loadtext:'上拉加载更多'
			}
		},
		onLoad(e) {
			this.id = e.id;
			this.__init()
		},
		onReachBottom() {
			if(this.loadtext !== '上拉加载更多') return;
			// this.loadtext = '加载中...'
			// this.list = [...this.list,...this.list]
			console.log(this.list)
		},
		filters:{
			formatTime(value){
				return $T.gettime(value);
			},
			rating(value){
				if(value === 3){
					return '中评'
				}else if(value > 3){
					return '好评'
				}else{
					return '差评'
				}
			}
		},
		computed:{
			// 筛选评论
			    filteredComments() {
			      switch (this.cateIndex) {
			        case 1:
			          return this.list.filter(comment => comment.rating > 3);
			        case 2:
			          return this.list.filter(comment => comment.rating === 3);
			        case 3:
			          return this.list.filter(comment => comment.rating < 3);
			        case 0:
			        default:
			          return this.list;
			      }
			    }
		},
		methods: {
			// 初始化页面
			__init(data){
				this.$H.get('/goods_comments/'+this.id).then(res=>{
					console.log(res);
					this.total = res.total,
					this.good_rate = res.good_rate,
					this.list = res.list,
					this.flist = res.list
					
				})
			},
			cateChange(index){
				this.cateIndex = index
			}
		}
	}
</script>

<style>
.cate-item{
	background: #FFEBEC;
	color: #7B6D6C;
	border-color: #DE7232;
}
.cate-item.active{
	background: #FF6B01!important;
	color: #FFFFFF;
	border-color: #DE7232!important;
}
</style>
